<template>
  <div>
    <el-dialog
      v-model="modelValue"
      :title="title"
      :width="width"
      :before-close="handleClose"
    >
      <template #title>
        <slot name="title" />
      </template>
      <slot></slot>
      <template #footer>
        <span class="dialog-footer">
          <el-button color="#F2F3F5" style="color: #1d2129" @click="cancel"
            >取消</el-button
          >
          <el-button color="#6042DC" style="color: white" @click="submit"
            >确认</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { emit } from "process";
import { ref } from "vue";
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "30%",
  },
});
const emits = defineEmits(["update:modelValue", "submit"]);
const handleClose = (done: () => void) => {
  emits("update:modelValue", false);
};
const cancel = () => {
  emits("update:modelValue", false);
};
const submit = () => {
  emits("update:modelValue", false);
  emits("submit");
};
</script>
<style lang="scss" scoped>
:deep(.el-dialog) {
  --el-dialog-padding-primary: 16px;
  .el-dialog__header {
    padding-bottom: 16px;
    border-bottom: 1px solid map-get($map: $stroke-color, $key: common);
  }
  .el-dialog__body {
    padding-top: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid map-get($map: $stroke-color, $key: common);
  }
  .el-dialog__footer {
    padding-top: 16px;
  }
}
</style>
